Skip to content

fix(ui): sync useLocalStorage across tabs via storage events (#8384) - #8422

Merged
loopover-orb[bot] merged 1 commit into
JSONbored:mainfrom
claytonlin1110:fix/use-local-storage-cross-tab-sync-8384
Jul 24, 2026
Merged

fix(ui): sync useLocalStorage across tabs via storage events (#8384)#8422
loopover-orb[bot] merged 1 commit into
JSONbored:mainfrom
claytonlin1110:fix/use-local-storage-cross-tab-sync-8384

Conversation

@claytonlin1110

@claytonlin1110 claytonlin1110 commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Make useLocalStorage listen for the native storage event so already-mounted hooks in other same-origin tabs re-render when the same key (or configured legacyKey) changes elsewhere.
  • Reset to initial when another tab removes the key (newValue: null); ignore malformed JSON the same way mount-time reads already do.
  • Extend use-local-storage.test.ts with cross-tab sync, ignore-other-key, null-reset, malformed, legacyKey, and unmount cleanup coverage.

Closes #8384

Scope

  • The PR title follows type(scope): short summary Conventional Commit format, for example fix(api): restore profile access checks.
  • This PR is focused and does not mix unrelated backend, UI, MCP, docs, dependency, and deploy changes.
  • This follows CONTRIBUTING.md and does not reintroduce GitHub Pages, VitePress, site/, or CNAME.
  • I linked a currently open issue this PR resolves (e.g. Closes #123) — a linked open issue is required for every contributor PR.

Validation

  • git diff --check
  • npm run actionlint
  • npm run typecheck
  • npm run test:coverage locally; codecov/patch requires ≥99% coverage of the lines AND branches you changed (aim for 100% on your diff so CI variance does not fail near the threshold). Global coverage is a non-blocking trend with a loose 90% backstop, not the gate.
  • npm run test:workers
  • npm run build:mcp
  • npm run test:mcp-pack
  • npm run ui:openapi:check
  • npm run ui:lint
  • npm run ui:typecheck
  • npm run ui:build
  • npm audit --audit-level=moderate
  • New or changed behavior has unit/integration tests for new branches, fallback paths, and sanitizer boundaries

If any required check was skipped, explain why:

  • UI-only change under apps/loopover-ui (Codecov ignores apps/**). Validated with npm run ui:test, npm run ui:typecheck, npm run ui:lint, git diff --check, and npm audit --audit-level=moderate as required by the issue.

Safety

  • No secrets, wallet details, hotkeys, coldkeys, user PATs, private keys, raw trust scores, private rankings, or private maintainer evidence are exposed.
  • Public GitHub text stays sanitized, low-noise, and does not imply compensation guarantees or optimization tactics.
  • Auth, cookie, CORS, GitHub App, Cloudflare, or session changes include negative-path tests.
  • API/OpenAPI/MCP behavior is updated and tested where needed.
  • UI changes use live API data or real empty/error/loading states, not production mock/demo fallbacks.
  • Visible UI changes include a UI Evidence section below with JPG/JPEG or PNG screenshots arranged as organized, captioned, clickable thumbnails. SVG screenshots are not used as review evidence. Review-only screenshots or recordings are not committed to the repository.
  • Public docs/changelogs are updated where needed; changelogs are only edited for release-prep PRs.

UI Evidence

No visual/layout change — data-correctness fix only (cross-tab state sync). Per the issue Expected Outcome: no UI Evidence screenshots required.

State / title JPG/PNG evidence
N/A — no visible UI change

Notes

  • Listener follows the same add/remove cleanup pattern as startHealthPolling() in apps/loopover-ui/src/lib/api/status.ts.
  • initial is read via a ref so inline [] / object-literal call sites do not re-subscribe every render.

@superagent-security

superagent-security Bot commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Superagent didn't find any vulnerabilities or security issues in this PR.

@loopover-orb loopover-orb Bot added the gittensor:bug Gittensor-scored bug fix — scores a 0.05x multiplier. label Jul 24, 2026
@loopover-orb

loopover-orb Bot commented Jul 24, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Tip

✅ LoopOver review result - approve/merge recommended

Review updated: 2026-07-24 12:47:25 UTC

2 files · 1 AI reviewer · no blockers · readiness 93/100 · CI green · clean

✅ Suggested Action - Approve/Merge

  • safe to merge

Review summary
This diff adds a native `storage` event listener to `useLocalStorage` so other same-origin tabs re-render when the tracked key changes, resets to `initial` on removal, and ignores malformed JSON — matching the existing mount-time read behavior. The `initialRef` pattern correctly avoids re-subscribing on every render when callers pass fresh literals as `initial`, and the effect cleanup properly removes the listener on unmount. The implementation is correct and the added tests (own-key update, other-key ignore, null-reset, malformed-JSON, legacyKey, unmount cleanup) directly exercise every new branch.

Nits — 4 non-blocking
  • nit: use-local-storage.ts — the listener fires `setValue` even when the new value is deep-equal to the current state; not a bug, just an avoidable re-render, similar to how `update()` already re-sets unconditionally.
  • nit: use-local-storage.test.ts — the malformed-JSON test doesn't assert `console.error`/`console.warn` wasn't called or suppress it, so a stray console noise from `JSON.parse` throwing inside try/catch won't be caught if a warn were later added.
  • Consider documenting in the JSDoc that legacyKey values from other tabs are also honored via storage events, matching the existing legacyKey migration comment.
  • Consider whether `event.storageArea` should be checked against `window.localStorage` to avoid reacting to sessionStorage events in test environments that dispatch generic StorageEvents (low risk here since events are manually dispatched with `key` matching).

Decision drivers

  • ✅ Code review — No blockers (1 reviewer)
  • ✅ Gate result — Passing (No configured blocker found.)
Context & advisory signals — never blocks the verdict
Signal Result Evidence
Linked issue ✅ Linked #8384
Related work ✅ No active overlap found No same-issue or scoped active PR overlap found.
Change scope ✅ 20/20 Low review scope from cached public metadata (1 linked issue).
Validation posture ✅ 25/25 PR body includes validation/test evidence.
Contributor workload ✅ 10/10 Author activity: 399 registered-repo PR(s), 251 merged, 92 issue(s).
Contributor context ✅ Confirmed Gittensor contributor claytonlin1110; Gittensor profile; 399 PR(s), 92 issue(s).
Improvement ✅ Minor risk: clean · value: minor · LLM: moderate
Linked issue satisfaction

Addressed
The diff adds a storage-event listener inside the mount effect that matches key/legacyKey, resets to initial on null newValue, ignores unparsable JSON via try/catch, and cleans up the listener on unmount, directly fulfilling the issue's implementation requirements; tests cover all six listed scenarios including cross-tab sync, key mismatch, null reset, malformed JSON, legacyKey, and unmount cleanu

Review context
  • Author: claytonlin1110
  • Role context: outside_contributor
  • Public audience mode: oss maintainer
  • Lane context: Repository is configured for direct PR review.
  • Public profile languages: not available
  • Official Gittensor activity: 399 PR(s), 92 issue(s).
  • PR-specific overlap: none found.
Contributor next steps
  • Start here: Triage stale or unlinked PRs.
Signal definitions
  • Related work = same linked issue, overlapping active PRs, or title/path similarity.
  • Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
  • Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
  • Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
  • Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.
🧪 Chat with LoopOver

Ask LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

  • @loopover ask <question> answers contribution-quality Q&A with source citations and freshness.
  • @loopover chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
  • A plain-language @loopover mention with a real question is routed to the closest matching read-only command automatically — no exact syntax required.

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

  • Re-run LoopOver review

loopover-orb[bot]
loopover-orb Bot approved these changes Jul 24, 2026
View reviewed changes

@loopover-orb loopover-orb Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoopOver approves — the gate is satisfied and CI is green.

@loopover-orb
loopover-orb Bot merged commit 9075a2c into JSONbored:main Jul 24, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@loopover-orb loopover-orb[bot] loopover-orb[bot] approved these changes
@JSONbored JSONbored Awaiting requested review from JSONbored JSONbored is a code owner

Assignees

@claytonlin1110 claytonlin1110

Labels

gittensor:bug Gittensor-scored bug fix — scores a 0.05x multiplier.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

useLocalStorage doesn't listen for storage events despite its own doc comment promising cross-tab sync

1 participant

@claytonlin1110